{% extends 'KeioStudyBundle:Theme:layout_flowergarden.html.twig' %}

{% block title %}
		Blog detail
{% endblock %}

{% block content %}
	<h3>{{ entity.title }}</h3>
	<br><font style="font-weight:bold">Date: </font>
		{{ entity.datetime|date('d/m/Y - H:i:s') }} (last update: {{ entity.datemodif|date('d/m/Y - H:i:s') }})
	<br><font style="font-weight:bold">Category: </font>
		{{ entity.category }}
	<br><font style="font-weight:bold">Author: </font>
		{{ entity.user }}
	<hr />
	{{ entity.blog|raw }}

	<ul class="record_actions">
	    <li>
	        <a href="{{ path('blog') }}">
	            Back to the list
	        </a>
	    </li>
	</ul>

{% endblock %}

{% block comment %}
	<div id="dialog-form" title="Thêm comment">
	  <p class="validateTips">Nhập tất cả các trường</p>
	  <form id="form_id" action="{{ path('blogcomment_create', { 'blog_id' : entity.id }) }}" method="post">
	  <fieldset>
	    <label for="name">Tên bạn</label>
	    <input type="text" id="name" name="name"/>
	    <label for="email">Email</label>
	    <input type="text" id="email" name="email"/>
	    <label for="name">Comment</label>
	    	<textarea id="comment" name="comment" required="required" maxlength="50000"></textarea>
	  </fieldset>
	  </form>
	</div>

	<h3>Comments:</h3>
	<hr/>
	{% for cmt in comment %}
		<p><font style="font-weight:bold; padding-top:20px">{{cmt.author }}</font> ({{ cmt.email }}, {{ cmt.datecreate|date('d/m/Y - H:i:s') }})
		<br>{{ cmt.comment }}
	{% endfor %}

	<p style="padding-top:15px">
	<button id="create-new">Thêm comment</button>
	</p>
{% endblock %}





{% block morejavascripts %}
  <link rel="stylesheet" href="{{ asset('css/modal-form.css') }}" media="screen" type="text/css" />
  <script>
  $(function() {
    var name = $( "#name" ),
      email = $( "#email" ),
      comment = $( "#comment" ),
      allFields = $( [] ).add( name ).add( email ).add( comment ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Tên của trường \"" + n + "\" phải dài từ " +
          min + " đến " + max + " ký tự." );
        return false;
      } else {
        return true;
      }
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 450,
      width: 400,
      position: { my: 'bottom', at: 'center', of: $(this) },
      modal: true,
      buttons: {
        "Thêm comment mới": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( name, "Tên của bạn", 3, 16 );

          bValid = bValid && checkLength( email, "email", 6, 80 );
          bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. xyz@example.com" );

          bValid = bValid && checkRegexp( comment, /\S/, "Comment không được bỏ trống" );



          // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
          if ( bValid ) {
            document.getElementById("form_id").submit();
            $( this ).dialog( "close" );
          }
        },
        Hủy: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });

    $( "#create-new" )
      .button()
      .click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });
  </script>

{% endblock %}
